{% extends "base.html" %}

{% block title %}
    {{ flatpage.title }}
{% endblock %}
<!--		<script type="text/javascript">
var pageReady = false;
</script>-->
{% block content %} 
    <p id="indexcontent">
        {{ fp.content|safe }}
    </p>
    <div style="margin-top: 15px; padding-top: 3px;">
    <div id="locationsearch" style="float: left; padding: 5px 10px">
        <p style="padding: 5px 0; font-size: 1.2em; font-weight: bold; border-bottom: 1px solid black;">
            Search Near Location
        </p>
        <form action="/map/" name="qForm" method="GET" onsubmit="geocodeQuery(); return false;">
            <!--ul style="list-style: none; padding-left: 10px;"-->
            <table id="searchform">
                {{ form.as_table }}
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <button type="submit" name="submitButton" id="submitButton">
                            Submit
                        </button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div id="namesearch" style="float: right; padding: 5px;">
        <p style="padding: 5px 0; font-size: 1.2em; font-weight: bold; border-bottom: 1px solid black;">
            Find a Particular Location
        </p>
        <form action="/search/name/" name="qNameForm" method="get">
            <table id="keywordform">
                {{ keywordform.as_table }}
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <button type="submit" name="submitButton" id="submitButton">
                            Submit
                        </button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    </div>
    <span style="clear: both;"></span>
    <script type="text/javascript">document.qForm.q.focus();</script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.s&amp;key={{ maps_api_key }}" type="text/javascript"></script>
    <script type="text/javascript">
        var geocodeHandler = function(point){
            if (point) {
                document.qForm.lat.value = point.lat();
                document.qForm.lng.value = point.lng();
                document.qForm.submit();
                return false;
            }
        }
        function geocodeQuery(){
            if (document.qForm.q.value == '') {
                alert("Please provide a location to search near.");
                document.qForm.q.focus();
                return false;
            }
            layers = document.qForm.layers;
            layerChecked = false;
            for (var i=0; i < layers.length; i++) {
                if (layers[i].checked) {
                    layerChecked = true;
                    break;
                }
            }
            if (!layerChecked) {
                alert("Please select at least one layer.");
                layers[0].focus();
                return false;
            }
            var geocoder = new GClientGeocoder();
            geocoder.getLatLng(document.qForm.q.value, geocodeHandler);
            return false;
        }
    </script>
{% endblock %}
